<template>
  <el-dialog title="删除连接" :visible.sync="deleteLinkModalShow" :width="modalWidth">
    <p>
      删除连接<span class="link-name">{{currentLinkInfo.name}}</span>,您确定这么做吗?
    </p>
    <div slot="footer" class="dialog-footer">
      <el-button @click="deleteLinkModalShow = false">取 消</el-button>
      <el-button type="primary" @click="deleteLink">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {mapState} from "vuex";
  export default {
    name: "EditLinkModal",
    computed: {
      ...mapState(["currentLinkInfo","modalWidth"]),
      deleteLinkModalShow: {
        get() {
          return this.$store.getters.deleteLinkModalShow;
        },
        set(flag) {
          this.$store.dispatch("deleteLinkModalShow", flag);
        }
      }
    },methods:{
      deleteLink(){
        this.$store.dispatch("deleteLink");
        this.$store.dispatch("deleteLinkModalShow", false);
      }
    }
  }
</script>

<style scoped>
  p{
    display: block;
    text-align: center;
    font-size: 20px;
    margin-left: auto;
    margin-right: auto;
  }
  .link-name{
    color: red;
  }
</style>
